{% extends "base_generic.html" %}

{% block content %}
  <div class="detail-header">
    <h1><i class="fas fa-book-open me-2"></i>图书馆主页</h1>
    <p class="lead">欢迎来到本地图书馆，这是一个使用Django开发的网站!</p>
  </div>
  
  <div class="row mb-4">
    <div class="col-md-3">
      <div class="stats-card">
        <div class="stats-card-icon">
          <i class="fas fa-book"></i>
        </div>
        <div class="stats-card-number">{{ num_books }}</div>
        <div class="stats-card-title">图书</div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="stats-card">
        <div class="stats-card-icon">
          <i class="fas fa-copy"></i>
        </div>
        <div class="stats-card-number">{{ num_instances }}</div>
        <div class="stats-card-title">副本</div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="stats-card">
        <div class="stats-card-icon">
          <i class="fas fa-check-circle"></i>
        </div>
        <div class="stats-card-number">{{ num_instances_available }}</div>
        <div class="stats-card-title">可借阅副本</div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="stats-card">
        <div class="stats-card-icon">
          <i class="fas fa-user-pen"></i>
        </div>
        <div class="stats-card-number">{{ num_authors }}</div>
        <div class="stats-card-title">作者</div>
      </div>
    </div>
  </div>

  <div class="detail-section">
    <h2><i class="fas fa-star me-2"></i>评分最高的书籍</h2>
    <div class="row">
      {% for book in top_rated_books %}
        <div class="col-md-4 col-lg-3 mb-4">
          <div class="book-card">
            <div class="book-card-img">
              {% if book.cover %}
                <img src="{{ book.cover.url }}" alt="{{ book.title }}">
              {% else %}
                <i class="fas fa-book fa-3x"></i>
              {% endif %}
            </div>
            <div class="book-card-body">
              <h5 class="book-card-title">{{ book.title }}</h5>
              <p class="book-card-author">{{ book.author }}</p>
              <div class="book-card-rating">
                {% with ''|center:book.get_average_rating as range %}
                  {% for _ in range %}
                    <i class="fas fa-star"></i>
                  {% endfor %}
                {% endwith %}
                ({{ book.get_average_rating|floatformat:1 }})
              </div>
              <a href="{{ book.get_absolute_url }}" class="btn btn-primary btn-sm">查看详情</a>
            </div>
          </div>
        </div>
      {% empty %}
        <div class="col-12">
          <p>暂无评分数据</p>
        </div>
      {% endfor %}
    </div>
  </div>
  
  <div class="detail-section">
    <h2><i class="fas fa-fire me-2"></i>热门借阅</h2>
    <div class="row">
      {% for book in popular_books %}
        <div class="col-md-4 col-lg-3 mb-4">
          <div class="book-card">
            <div class="book-card-img">
              {% if book.cover %}
                <img src="{{ book.cover.url }}" alt="{{ book.title }}">
              {% else %}
                <i class="fas fa-book fa-3x"></i>
              {% endif %}
            </div>
            <div class="book-card-body">
              <h5 class="book-card-title">{{ book.title }}</h5>
              <p class="book-card-author">{{ book.author }}</p>
              <a href="{{ book.get_absolute_url }}" class="btn btn-primary btn-sm">查看详情</a>
            </div>
          </div>
        </div>
      {% empty %}
        <div class="col-12">
          <p>暂无借阅数据</p>
        </div>
      {% endfor %}
    </div>
  </div>
  
  <div class="detail-section">
    <h2><i class="fas fa-clock me-2"></i>最新上架</h2>
    <div class="row">
      {% for book in latest_books %}
        <div class="col-md-4 col-lg-3 mb-4">
          <div class="book-card">
            <div class="book-card-img">
              {% if book.cover %}
                <img src="{{ book.cover.url }}" alt="{{ book.title }}">
              {% else %}
                <i class="fas fa-book fa-3x"></i>
              {% endif %}
            </div>
            <div class="book-card-body">
              <h5 class="book-card-title">{{ book.title }}</h5>
              <p class="book-card-author">{{ book.author }}</p>
              <a href="{{ book.get_absolute_url }}" class="btn btn-primary btn-sm">查看详情</a>
            </div>
          </div>
        </div>
      {% empty %}
        <div class="col-12">
          <p>暂无图书数据</p>
        </div>
      {% endfor %}
    </div>
  </div>

  <div class="alert alert-info">
    <i class="fas fa-info-circle me-2"></i>您已访问该页面 <strong>{{ num_visits }}</strong> 次。
  </div>
{% endblock %} 